<template>
  <div id="index">
    <div class="app-container"
      id="container">
      <el-container style="padding-bottom: 40px">
        <el-aside width="320px"
          style="
            background-color: #fff;
            border: 1px solid #ebebeb;
            -moz-border-radius: 10px;
            margin: 10px;
            padding: 50px 24px 24px;
          ">
          <el-form ref="form"
            :model="form"
            label-width="110px"
            label-position="center"
            size="small">
            <!-- <el-form-item label="用户姓名:">
                {{form.customerName}}
              </el-form-item> -->

            <el-form-item label="会员名称:">
              {{ form.customerName }}
            </el-form-item>
            <el-form-item label="会员等级:">
              {{ form.levelName }}
            </el-form-item>
            <el-form-item label="邀请码:">
              {{ form.customerNo }}
            </el-form-item>
            <el-form-item label="手机号码:">
              {{ form.phone }}
            </el-form-item>
            <!--
            <el-form-item label="用户姓名:">
              {{ form.contactMan }}
            </el-form-item>
            -->
            <el-form-item label="用户身份:">
              {{ form.customerType }}
            </el-form-item>
            <el-form-item label="身份详情:">
              {{ form.realRemark }}
            </el-form-item>
            <el-form-item label="QQ号码:">
              {{ form.rmfLabel }}
            </el-form-item>
            <el-form-item label="E-mail:">
              {{ form.rvalue }}
            </el-form-item>

            <el-form-item label="注册日期:">
              {{ form.createTime }}
            </el-form-item>
          </el-form>
        </el-aside>
        <el-main style="
            background-color: #fff;
            border: 1px solid #ebebeb;
            -moz-border-radius: 10px;
            margin: 10px;
          ">
          <el-tabs v-model="activeName"
            @tab-click="handleClick">
            <el-tab-pane label="资产信息"
              name="fourth">
              <div>
                <div class="product-header">
                  <em style="font-style: normal"
                    class="big_title_style">积分情况</em>
                </div>
                <div class="show_balance_type">
                  <div class="show_balance_type_item">
                    <div class="show_balance_type_item_num">
                      {{ data.allScore || 0 }}
                    </div>
                    <div class="show_balance_type_item_label">总积分</div>
                  </div>
                  <div class="show_balance_type_item">
                    <div class="show_balance_type_item_num">
                      {{ data.allScore-data.score }}
                    </div>
                    <div class="show_balance_type_item_label">使用积分</div>
                  </div>
                  <div class="show_balance_type_item">
                    <div class="show_balance_type_item_num">
                      {{ data.freezeScore }}
                    </div>
                    <div class="show_balance_type_item_label">冻结积分</div>
                  </div>
                  <div class="show_balance_type_item">
                    <div class="show_balance_type_item_num">
                      {{ data.score || 0 }}
                    </div>
                    <div class="show_balance_type_item_label">剩余积分</div>
                  </div>
                </div>
                <div class="product-header">
                  <em style="font-style: normal"
                    class="big_title_style">排版次数</em>
                </div>
                <div class="show_balance_type">
                  <div class="show_balance_type_item">
                    <div class="show_balance_type_item_num">
                      {{ data.allRedBag || 0 }}
                    </div>
                    <div class="show_balance_type_item_label">总次数</div>
                  </div>
                  <div class="show_balance_type_item">
                    <div class="show_balance_type_item_num">
                      {{ data.allRedBag-data.redBag }}
                    </div>
                    <div class="show_balance_type_item_label">使用次数</div>
                  </div>
                  <div class="show_balance_type_item">
                    <div class="show_balance_type_item_num">
                      {{ data.freezeRedBag }}
                    </div>
                    <div class="show_balance_type_item_label">冻结次数</div>
                  </div>
                  <div class="show_balance_type_item">
                    <div class="show_balance_type_item_num">
                      {{ data.redBag || 0 }}
                    </div>
                    <div class="show_balance_type_item_label">剩余次数</div>
                  </div>
                </div>
                <div class="product-header"
                  style="margin-top: 40px">
                  <em style="font-style: normal"
                    class="big_title_style">储值记录</em>
                </div>
                <div style="padding-left: 20px">
                  <el-table :data="threeStoreData"  border>

                    <el-table-column prop="rechargeName"
                      label="储值项目">
                      <template slot-scope="scope">
                        <span>{{ scope.row.rechargeName}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="payAmountStr"
                      label="储值金额">
                      <template slot-scope="scope">
                        <span>{{ scope.row.payAmountStr}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="score"
                      label="兑换积分">
                      <template slot-scope="scope">
                        <span>{{ scope.row.score}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="levelName"
                      label="兑换VIP">
                      <template slot-scope="scope">
                        <span>{{ scope.row.levelName}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="payTime"
                      label="储值时间">
                      <template slot-scope="scope">
                        <span>{{ scope.row.payTime}}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination key="p7"
                    v-if="threeStoreTotal > 0"
                    :total="threeStoreTotal"
                    :page.sync="threeStoreNum"
                    :limit.sync="threeStoreSize"
                    @pagination="listFundStorePage" />
                </div>

                <div class="product-header"
                  style="margin-top: 40px">
                  <em style="font-style: normal"
                    class="big_title_style">资产变动详情</em>
                </div>
                <div style="padding-left: 20px">
                  <el-table :data="threeBalanceData"
                    border>
                    <el-table-column min-width="100px"
                      prop="storeName"
                      label="资产类型">
                      <template slot-scope="scope">
                        <span>{{
                          scope.row.bizType == "score"
                          ? "积分"
                          : "排版"
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column min-width="200px"
                      prop="proName"
                      label="业务描述">
                      <template slot-scope="scope">
                        <span>{{scope.row.bizDesc}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column min-width="100px"
                      prop="amountStr"
                      label="资产数额">
                    </el-table-column>
                    <el-table-column min-width="200px"
                      prop="remark"
                      label="资产说明">
                    </el-table-column>

                    <el-table-column min-width="200px"
                      prop="createTime"
                      label="创建时间">
                    </el-table-column>
                  </el-table>
                  <pagination key="p8"
                    v-if="threeBalanceTotal > 0"
                    :total="threeBalanceTotal"
                    :page.sync="threeBalanceNum"
                    :limit.sync="threeBalanceSize"
                    @pagination="listBalanceChangePage" />
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="消费记录"
              name="third">
              <div>
                <div class="product-header"
                  style="margin-top: 40px">
                  <em style="font-style: normal"
                    class="big_title_style">论文下载列表</em>
                </div>
                <div style="padding-left: 20px">
                  <el-table :data="downloadData"
                    border>
                    <el-table-column min-width="100px"
                      prop="proNo"
                      label="论文编号">
                    </el-table-column>
                    <el-table-column min-width="300px"
                      prop="proName"
                      label="论文标题">
                    </el-table-column>
                    <el-table-column min-width="80px"
                      prop="payByScore"
                      label="积分">
                    </el-table-column>
                    <el-table-column min-width="100px"
                      prop="createTime"
                      label="创建时间">
                    </el-table-column>
                  </el-table>
                  <pagination key="p6"
                    v-if="downloadTotal > 0"
                    :total="downloadTotal"
                    :page.sync="downloadNum"
                    :limit.sync="downloadSize"
                    @pagination="listDownloadChangePage" />
                </div>
                <div class="product-header"
                  style="margin-top: 40px">
                  <em style="font-style: normal"
                    class="big_title_style">论文买断列表</em>
                </div>
                <div style="padding-left: 20px">
                  <el-table :data="maiduanData"
                    border>
                    <el-table-column min-width="100px"
                      prop="proNo"
                      label="论文编号">
                    </el-table-column>
                    <el-table-column min-width="300px"
                      prop="proName"
                      label="论文标题">
                    </el-table-column>
                    <el-table-column min-width="80px"
                      prop="costPrice"
                      label="积分">
                    </el-table-column>
                    <el-table-column min-width="100px"
                      prop="createTime"
                      label="创建时间">
                    </el-table-column>
                  </el-table>
                  <pagination key="p5"
                   v-if="maiduanTotal > 0"
                   :total="maiduanTotal"
                   :page.sync="maiduanNum"
                   :limit.sync="maiduanSize"
                   @pagination="listMaiduanChangePage" />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="收藏记录"
              name="second">
              <div>
                <div style="padding-left: 20px">
                  <el-table :data="collectData"
                    border>
                    <el-table-column min-width="160px"
                      prop="productNo"
                      label="商品编号">
                    </el-table-column>
                    <el-table-column min-width="220px"
                      prop="objName"
                      label="商品名称">
                    </el-table-column>
                    <el-table-column min-width="80px"
                      prop="numbers"
                      label="字数">
                    </el-table-column>
                    <el-table-column min-width="80px"
                      prop="lunwenType"
                      label="论文类型">
                    </el-table-column>
                    <el-table-column min-width="200px"
                      prop="collectTime"
                      label="收藏时间">
                    </el-table-column>
                  </el-table>
                  <pagination key="p4"
                   v-if="collectTotal > 0"
                   :total="collectTotal"
                   :page.sync="collectNum"
                   :limit.sync="collectSize"
                   @pagination="listCollectChangePage" />
                </div>
              </div>
            </el-tab-pane>

          </el-tabs>
        </el-main>
        <div class="dw">
          <el-button @click="colsePro"
            style="margin-top: 10px; margin-left: 40%">返回</el-button>
        </div>
      </el-container>
    </div>
  </div>
</template>

<script>
import editor from "./editor";
import CustomerRecord from "./customerRecord.vue";

import {
  getInfo,
  listBuyRecord,
  getStatisticsByUid,
  listFundStore,
  getFundByUid,
  listConsumptionByUid,
  getConsumptionStatics,
  recirdListByUid,
  selectListLimitByCustomerId,
  categorySelectOptions,
  addOrEditTags,
  myBalanceDetail,
  listBalanceChange,
  getListArchivesLattice,
  serviceRecord,
  changeRealNameRemark,
} from "@/api/customer/Info";
import { listCouponDetail } from "@/api/activity/couponDetail";
import ShowCardProject from "@/views/components/showCardProject";
import CardItem from "./cardItem.vue";
import Record from "./record.vue";
import UserBehavior from './userBehavior.vue';

import OrderDetail from "@/views/order/info/order";
import dataVue from "../../platform/moudle/data.vue";

export default {
  components: {
    ShowCardProject,
    editor,
    CardItem,
    OrderDetail,
    Record,
    CustomerRecord,
    UserBehavior
  },
  data () {
    return {
      isEditRealName: false,
      isEditContactMan: false,
      realNameRemark: "",
      contactMan: "",
      tagsShow: false,
      categoryOptions: [],
      tagDialogVisible: false,
      inputVisible: false,
      inputValue: "",
      zIndex: 2000,
      customerUid: this.$route.params && this.$route.params.customerUid,
      form: {},
      sexOptions: [],
      activeName: "fourth",
      cardAcvitiyName: "cardSecond",
      query: {
        pageSize: 9,
        pageNum: 1,
        type: null,
      },

      viewItemType: "",
      total: 0,
      loading: false,
      data: {},
      list: [],
      threeStoreData: [],
      threeStoreSize: 10,
      threeStoreNum: 1,
      threeStoreTotal: 0,
      threeBalanceData: [],
      threeBalanceSize: 10,
      threeBalanceNum: 1,
      threeBalanceTotal: 0,
      threeCouponData: [],
      threeCouponSize: 10,
      threeCouponNum: 1,
      threeCouponTotal: 0,

      downloadData: [],
      downloadSize: 10,
      downloadNum: 1,
      downloadTotal: 0,

      maiduanData: [],
      maiduanSize: 10,
      maiduanNum: 1,
      maiduanTotal: 0,

      collectData: [],
      collectSize: 10,
      collectNum: 1,
      collectTotal: 0,

      fourData: {
        customerTags: [],
      },
      fourTableData: [],
      fourDataList: [],
      showDialog: false,
      cardInfo: {},
      formtags: {
        checkList: [],
      },
      showOrderDialog: false,
      orderUid: "",
      couponTypeOptions: [],
      dataStatusOptions: [],
      isUsedOptions: [],
      customerRecordList: [],
      totalRecord: 0,
      dialogVisibleServiceCard: false,
      itemHistoryList: [],
      listAttribute: [],
      serviceType: "",
      serviceName: "",
      cardRecordId: ''
    };
  },
  created () {

    this.getDicts("customer_sex").then((response) => {
      this.sexOptions = response.data;
    });
    getInfo(this.customerUid).then((response) => {
      this.form = response.data.customer;
      this.realNameRemark = this.form.realRemark;
      this.contactMan = this.form.contactMan;
    });

    this.getDicts("sys_data_status").then((response) => {
      this.dataStatusOptions = response.data;
    });

    this.getFirstCard();
  },
  methods: {
    toSelectCard (recordId) {
      if (recordId != this.cardRecordId) {
        this.cardRecordId = recordId
      } else {
        this.cardRecordId = ''
      }
    },
    toShowRealNameRemark () {
      this.isEditRealName = true;
    },
    toCancelUserInfo () {
      this.isEditRealName = false;
      this.realNameRemark = "";
    },
    toShowContactName () {
      this.isEditContactMan = true;
    },
    toCancelContactName () {
      this.isEditContactMan = false;
      this.contactMan = "";
    },

    toSubmitContactName () {
      changeRealNameRemark({
        customerUid: this.customerUid,
        contactMan: this.contactMan,
      }).then((res) => {
        this.isEditContactMan = false;
      });
    },
    toSubmitUserInfo () {
      changeRealNameRemark({
        customerUid: this.customerUid,
        realRemark: this.realNameRemark,
      }).then((res) => {
        this.isEditRealName = false;
      });
    },
    toShowItemInfo (serviceId, subscribeId) {
      this.dialogVisibleServiceCard = true;

    },
    handleCloseServiceCard () {
      this.dialogVisibleServiceCard = false;
      setTimeout(() => {
        this.listAttribute = [];
        this.itemHistoryList = [];
      }, 300);
    },
    toViewOrderDetail ({ orderId }) {
      this.orderUid = orderId;
      this.showOrderDialog = true;
    },
    closeDialog () {
      this.orderUid = "";
      this.showOrderDialog = false;
    },
    updateCustomerTags () {

    },
    handleClose (tag) {
      this.fourData.customerTags.splice(
        this.fourData.customerTags.indexOf(tag),
        1
      );
    },

    showInput () {
      categorySelectOptions().then((response) => {
        this.categoryOptions = response.data;
        this.tagDialogVisible = true;
        console.log(this.categoryOptions);
      });
    },

    handleInputConfirm () {

    },
    toShowCardProject (item) {
      this.cardInfo = item;
      this.showDialog = true;
    },
    toCloseShowProjectBox () {
      this.showDialog = false;
      this.cardInfo = {};
    },
    handleCardClick (tab, event) {
      this.query.pageSize = 9;
      this.query.pageNum = 1;
      if (tab.name == "cardFirst") {
        this.query.type = 1;
      } else if (tab.name == "cardSecond") {
        this.query.type = 2;
      } else if (tab.name == "cardThird") {
        this.query.type = 3;
      } else if (tab.name == "cardFourth") {
        this.query.type = 4;
      } else if (tab.name == "cardFive") {
        this.query.type = 5;
      }
    },
    handleClick (tab, event) {
      if (tab.name == "first") {
        this.query.pageSize = 9;
        this.query.pageNum = 1;
        this.getFirstList();
        this.getCardList("2");
        this.cardAcvitiyName = "cardSecond";
      } else if (tab.name == "second") {
        this.listCollectChangePage();
      } else if (tab.name == "third") {
        // this.query.pageSize = 10;
        // this.query.pageNum = 1;
        // this.getThirdList();
        this.listDownloadChangePage();
        this.listMaiduanChangePage();
      } else if (tab.name == "fourth") {
        this.getFirstCard();
      }
    },

    getFirstCard(){
      this.threeStoreSize = 10
      this.threeStoreNum = 1
      this.listFundStorePage()
      this.threeBalanceSize = 10
      this.threeBalanceNum = 1
      this.listBalanceChangePage()
      this.threeCouponSize = 10
      this.threeCouponNum = 1
      this.listCouponDetailPage()
      getFundByUid(this.customerUid).then((response) => {
        this.data = response.data || {};
      });
    },

    getFirstList () {
      getStatisticsByUid(this.customerUid).then((response) => {
        this.data = response.data || {};
      });
    },
    changeCheckbox (val) {
      this.query.pageSize = 10;
      this.query.pageNum = 1;
      this.getCardList();
    },
    getCardList (type) {
      if (type) {
        this.query.type = type;
      }
      this.loading = true;
      listBuyRecord(this.customerUid, {
        ...this.query,
        serviceItemType: this.viewItemType,
      }).then((response) => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getSecondList () {
      this.loading = true;
      this.list = [];
      this.total = 0;
      // console.log("list===",list)
      listConsumptionByUid(this.customerUid, this.query).then((response) => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      getConsumptionStatics(this.customerUid).then((response) => {
        this.data = response.data || {};
      });
    },
    listFundStorePage () {
      this.loading = true;
      let data = {
        pageSize: this.threeStoreSize,
        pageNum: this.threeStoreNum,
        businessType: 'storeBalance',
      };
      myBalanceDetail(this.customerUid, data).then((response) => {
        this.threeStoreData = response.storeBalance.rows;
        this.threeStoreTotal = response.storeBalance.total;
        this.loading = false;
      });
    },
    listBalanceChangePage () {
      this.loading = true;
      let data = {
        pageSize: this.threeBalanceSize,
        pageNum: this.threeBalanceNum,
        businessType: 'orderBalance',
      };
      myBalanceDetail(this.customerUid, data).then((response) => {
        this.threeBalanceData = response.orderBalance.rows;
        this.threeBalanceTotal = response.orderBalance.total;
        this.loading = false;
      });
    },

    listDownloadChangePage(){
      this.loading = true;
      let data = {
        pageSize: this.downloadSize,
        pageNum: this.downloadNum,
        businessType: 'download',
      };
      myBalanceDetail(this.customerUid, data).then((response) => {
        this.downloadData = response.lunwenList.rows;
        this.downloadTotal = response.lunwenList.total;
        this.loading = false;
      });
    },
    listMaiduanChangePage(){
      this.loading = true;
      let data = {
        pageSize: this.maiduanSize,
        pageNum: this.maiduanNum,
        businessType: 'maiduan',
      };
      myBalanceDetail(this.customerUid, data).then((response) => {
        this.maiduanData = response.maiduan.rows;
        this.maiduanTotal = response.maiduan.total;
        this.loading = false;
      });
    },

    listCollectChangePage(){
      this.loading = true;
      let data = {
        pageSize: this.collectSize,
        pageNum: this.collectNum,
        businessType: 'collect',
      };
      myBalanceDetail(this.customerUid, data).then((response) => {
        this.collectData = response.collect.rows;
        this.collectTotal = response.collect.total;
        this.loading = false;
      });
    },
    listCouponDetailPage () {
      this.loading = true;
      let data = {
        pageSize: this.threeCouponSize,
        pageNum: this.threeCouponNum,
        businessType: 'coupon',
      };
      myBalanceDetail(this.customerUid, data).then((response) => {
        this.threeCouponData = response.coupon.rows;
        this.threeCouponTotal = response.coupon.total;
        this.loading = false;
      });
    },
    getThirdList () {
      this.loading = true;
      myBalanceDetail(this.customerUid, this.query).then((response) => {
        // this.threeStoreData = response.storeBalance.rows;
        // this.threeStoreTotal = response.storeBalance.total;

        // this.threeBalanceData = response.orderBalance.rows;
        // this.threeBalanceTotal = response.orderBalance.total;

        // this.threeCouponData = response.coupon.rows;
        // this.threeCouponTotal = response.coupon.total;

        this.loading = false;
      });
      getFundByUid(this.customerUid).then((response) => {
        this.data = response.data || {};
      });
    },
    getFourList () {
      selectListLimitByCustomerId(this.customerUid).then((response) => {
        this.fourData = response.data;
        //  this.$set(this.form, 'checkList', [])
        if (this.fourData) {
          this.fourDataList = [];
          this.fourDataList.push(this.fourData.rvalue);
          this.fourDataList.push(this.fourData.fvalue);
          this.fourDataList.push(this.fourData.mvalue);
          // console.log(this.fourDataList, 1111);
          this.tagsShow = true;
          this.fourTableData = [];
          let data = {
            rvalue: this.fourData.rvalue,
            fvalue: this.fourData.fvalue,
            mvalue: this.fourData.mvalue,
          };
          this.fourTableData.push(data);
          /**
           * 标签
           */
          if (this.fourData.customerTags) {
            this.formtags.checkList = [];
            this.fourData.customerTags.forEach((vo) => {
              this.formtags.checkList.push(vo.labelId);
            });
          }
        }
      });
      // recirdListByUid(this.customerUid).then(response => {
      //   this.list = response.data;
      // })
    },
    resetServiceRecord () {
      this.serviceName = "";
      this.serviceType = "";
    },
    async getSubscribeDetailRecord () {
      let res = await serviceRecord(this.customerUid, {
        serviceName: this.serviceName,
        serviceType: this.serviceType,
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize,
      });
      if (res) {
        let { rows, total } = res;
        rows.forEach((item) => {
          item.durationTime = 0;
          item.listVo.forEach((val, idx) => {
            if (idx == 0) {
              item.durationTime += val.itemServiceDuration;
            } else {
              item.durationTime += val.itemComposeDuration;
            }
          });
        });
        this.customerRecordList = rows;
        this.totalRecord = total;
      }
    },
    // 优惠券类型字典翻译
    couponTypeFormat (row, column) {
      return this.selectDictLabel(this.couponTypeOptions, row.couponType);
    },
    // 数据状态字典翻译
    dataStatusFormat (row, column) {
      return this.selectDictLabel(this.dataStatusOptions, row.dataStatus);
    },
    // 使用状态字典翻译
    isUsedFormat (row, column) {
      return this.selectDictLabel(this.isUsedOptions, row.isUsed);
    },
    sexFormat (value) {
      return this.selectDictLabel(this.sexOptions, value);
    },
    colsePro () {
      // this.$store.dispatch("tagsView/delView", this.$route);
      // this.$router.push({
      //   path: "/customer/Info",

      // });
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="scss">
#container {
  width: 100%;
  height: 50%;
}

#photo {
  float: left;
  width: 70%;
}

#content {
  float: right;
  width: 30%;
}

.to-select-medical {
  position: absolute;
  top: 10px;
  left: 450px;
  z-index: 10;
}

.form-item-realname {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.show-rfm-content {
  display: flex;
  align-content: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;

  .show-num-data {
    flex: 1;
    padding-left: 15px;
    margin-right: 15px;
    min-width: 250px;

    .item-rfm-box {
      padding: 16px 32px;
      background-color: #fff;
      border-radius: 8px;
      border: 1px solid #eee;

      &:not(:last-child) {
        margin-bottom: 15px;
      }

      .item-rfm-box-label {
        font-size: 16px;
        color: #999;
        margin-bottom: 14px;
      }

      .item-rfm-box-value {
        font-size: 30px;
        font-weight: 600;
        line-height: 1;
      }
    }
  }

  .show-map-data {
    flex: 2;
    padding-left: 20px;
  }
}

.show-service-list {
  width: 100%;

  .item-show-service {
    &:not(:last-child) {
      margin-bottom: 20px;
    }
  }

  .item-service-date {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
  }
}

.attribute-form-scroll {
  width: 100%;
  position: relative;
  overflow-x: auto;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;

  .attribute-form-head {
    white-space: nowrap;
    position: relative;
    height: 30px;

    .attribute-form-head-item {
      display: inline-block;
      min-width: 150px;
      padding: 0 6px;
      height: 30px;
      line-height: 29px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      border-bottom: 1px solid #eee;

      &:not(:last-child) {
        border-right: 1px solid #eee;
      }
    }
  }

  .attribute-form-content {
    position: relative;

    .attribute-form-item {
      white-space: nowrap;
      position: relative;
      height: 30px;

      .attribute-form-content-item {
        display: inline-block;
        min-width: 150px;
        height: 30px;
        padding: 0 6px;
        line-height: 29px;
        text-align: center;
        font-size: 14px;
        border-bottom: 1px solid #eee;
        border-top: none;

        &:not(:last-child) {
          border-right: 1px solid #eee;
        }
      }
    }
  }
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

.show-skin-content-txt {
  word-break: break-all;
}

.product-header {
  top: 0;
  width: 600px;
  padding: 15px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
  margin-bottom: 16px;
}

.show_balance_type {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: 24px;

  .show_balance_type_item {
    text-align: center;

    .show_balance_type_item_num {
      font-size: 32px;
      color: #333;
      margin-bottom: 10px;
      line-height: 1;
    }

    .show_balance_type_item_label {
      font-size: 14px;
      color: #999;
    }
  }
}

.customer_record_item {
  border: 1px solid #eee;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);

  &:not(:last-child) {
    margin-bottom: 32px;
  }

  .customer_record_item_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 40px;
    font-size: 13px;
    color: #333;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
  }

  .customer_record_item_project {
    .customer_record_project_th {
      display: flex;
      font-size: 14px;
      color: #333;
    }

    .customer_record_project_tr {
      display: flex;
      font-size: 14px;
      color: #333;
    }

    .customer_record_project_td {
      flex: 1;
      overflow: hidden;
      padding: 10px;
      font-size: 12px;
      border-bottom: 1px solid #eee;

      &:not(:last-child) {
        border-right: 1px solid #eee;
      }
    }

    .customer_record_item_project-empty {
      line-height: 60px;
      text-align: center;
      height: 60px;
      color: #909399;
      font-size: 14px;
      border-bottom: 1px solid #eee;
    }
  }

  .customer_record_item_moreInfo {
    .customer_record_item_box {
      display: flex;
      border-bottom: 1px solid #eee;

      .customer_record_moreInfo_item {
        &:last-child {
          border-left: 1px solid #eee;
        }
      }
    }

    .customer_record_moreInfo_item {
      flex: 1;
      overflow: hidden;
      display: flex;

      &:not(:last-child) {
        min-height: 50px;
        line-height: 40px;
      }

      .customer_record_moreInfo_item_label {
        width: 160px;
        font-size: 14px;
        color: #999;
        border-right: 1px solid #eee;
        line-height: 50px;
        background-color: #f9f9f9;
        padding: 0 10px;
      }

      .customer_record_moreInfo_item_desc {
        padding: 10px;
        flex: 1;
        overflow: hidden;
        font-size: 14px;
        color: #333;
        line-height: 20px;
      }

      .customer_record_moreInfo_item_img {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        min-height: 80px;
        padding: 10px 10px 0 10px;

        .show_item_img {
          width: 50px;
          height: 50px;
          margin: 0 10px 10px 0;
          border-radius: 4px;
          overflow: hidden;
        }
      }
    }

    .customer_record_moreInfo_showImg {
      min-height: 80px;
      line-height: 80px;

      .customer_record_moreInfo_item_label {
        line-height: 80px;
      }
    }
  }
}

.div-label {
  font-size: 16px;
  color: #101010;
}

.div-label-big {
  font-size: 18px;
  color: #101010;
}

.div-card {
  height: 120px;
  width: 350px;
  margin: 10px;
  background-color: #f2f2f2;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.div-card-div {
  width: 230px;
  float: left;
}

.div-card-first {
  margin: 10px 10px 10px 15px;
  font-size: 16px;
}

.div-card-second {
  margin: 5px 5px 5px 15px;
  font-size: 12px;
}

.div-card-third {
  margin: 20px 20px 20px 15px;
  font-size: 14px;
}

.div-card-fourth {
  width: 120px;
  float: left;
  margin: 20px 0px 0px -25px;
  font-size: 16px;
}

table {
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  text-align: left;
}

table th {
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}

table td {
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}

table tr {
  height: 48px;
}
</style>
